<template>
  <div style="background-color: #f0f2f5;padding-top:10px">
    <!-- <div class="tabs-top" v-if="from.tagName!='zx-buyBox'">
    <el-tabs v-model="tabsType" class="demo-tabs" @tab-change="tabsClick">
        <el-tab-pane v-for="item in tabsList" :key="item.value" :label="item.label" :name="item.value"></el-tab-pane>
      </el-tabs>
    </div> -->
  <el-row :gutter="20">
    <el-col :span="16">
      <el-row>
        <el-col class="leftCol1" :span="24">
          <el-row>
            <span style="display: inline-block;width:5px;height:24px;background-color:#2158F3"></span>
            <span style="padding-left:5px;display: inline-block;height:24px;line-height:24px;font-weight:600">常用功能</span>
          </el-row>
          <el-row :gutter="20">
            <!-- 货代 -->
            <el-col :span="24" v-if="from.companyRole=='zx'">
              <div v-if="from.tagName=='zx-rent'">
                <!-- 租箱进出口 -->
                <div v-if="tabsType==1" class="tagList">
                <router-link to="/boxRentAgent/rentBox">
                  <img class="use-icon" src="../assets/workbenches/zuXiang.svg" />
                  <span>租箱市场</span>
                </router-link>
                <router-link to="/orderManageHD/rentOrder">
                  <img class="use-icon" src="../assets/workbenches/zxdingdan.svg" />
                  <span>租箱订单</span>
                </router-link>
                <router-link to="/financialManage/bills">
                  <img class="use-icon" src="../assets/workbenches/caiWu.svg" />
                  <span>账单管理</span>
                </router-link>
                <router-link to="/boxRentAgent/myRentBox">
                  <img class="use-icon" src="../assets/workbenches/wdZuxiang.svg" />
                  <span>租箱记录</span>
                </router-link>
                <router-link to="" @click="cheyuanClick">
                  <img class="use-icon" src="../assets/workbenches/zhaoChe.svg" />
                  <span>找车源</span>
                </router-link>
              </div>
              <div v-else-if="tabsType==2"  class="tagList">
                <!-- 回调箱 -->
                <router-link to="/hdzxjk/agentMarketHuiDiaoBox/agentMarketHuiDiaoBox">
                  <img class="use-icon" src="../assets/workbenches/zuXiang.svg" />
                  <span>租箱广告</span>
                </router-link>
                <router-link to="/hdzxjk/orderManageHD/agentHuiDiaoOrder">
                  <img class="use-icon" src="../assets/workbenches/dingdan.svg" />
                  <span>租箱订单</span>
                </router-link>
                <router-link to="/financialManage/bills">
                  <img class="use-icon" src="../assets/workbenches/caiWu.svg" />
                  <span>财务账单</span>
                </router-link>
                <router-link to="/hdzxjk/myHuiDiaoBox/myHuiDiaoBox">            
                  <img class="use-icon" src="../assets/workbenches/wdZuxiang.svg" />
                  <span>我的租箱</span>
                </router-link>
                <router-link to="" @click="cheyuanClick">
                  <img class="use-icon" src="../assets/workbenches/zhaoChe.svg" />
                  <span>找车源</span>
                </router-link>
              </div>
              </div>
               <div v-else-if="from.tagName=='zx-buyBox'">
                <!-- 货代贸易购买出售 -->
                <div v-if="tabsType==1" class="tagList">
                <router-link to="/hdzxgm/agentBuyBox/agentBuyBox">
                    <img class="use-icon" src="../assets/workbenches/gouXiang.svg" />
                    <span>购箱市场</span>
                  </router-link>
                  <router-link to="/hdzxgm/agentBuyOrder">
                    <img class="use-icon" src="../assets/workbenches/gouxiangDingdan.svg" />
                    <span>购箱订单</span>
                  </router-link>
                  <router-link to="/financialManage/bills">
                    <img class="use-icon" src="../assets/workbenches/caiWu.svg" />
                    <span>财务账单</span>
                  </router-link>
                  <router-link to="/hdzxgm/tiXiangManageBuyBox/GMtiXiangManageBuyBox">
                    <img class="use-icon" src="../assets/workbenches/gouxiangTixiangdan.svg" />
                    <span>购箱提箱单</span>
                  </router-link>
                  <router-link to="/hdzxgm/tiXiangManageBuyBox/GMtiXiangManageBuyBoxInfo">
                    <img class="use-icon" src="../assets/workbenches/gouxiangTixiangjilu.svg" />
                    <span>购箱提箱记录</span>
                  </router-link>
                </div>
              </div>
            </el-col>
            <!-- 集装箱公司集装箱公司 -->
            <el-col :span="24" v-else-if="from.companyRole=='putBox'">
              <div v-if="from.tagName=='putBox-rent'">
                <!-- 集装箱公司进出口 -->
                <div v-if="tabsType==1" class="tagList">
                <router-link to="/boxRent/seekRentBox">
                  <img class="use-icon" src="../assets/workbenches/qiuzuGg.svg" />
                  <span>租箱市场</span>
                </router-link>
                <router-link to="/orderManage/rentOrder">
                  <img class="use-icon" src="../assets/workbenches/shouxiangDingdan.svg" />
                  <span>租箱订单</span>
                </router-link>
                <router-link to="/financialManage/bills">
                  <img class="use-icon" src="../assets/workbenches/caiWu.svg" />
                  <span>财务账单</span>
                </router-link>
                <router-link to="/boxManageMyBox/myBox">
                  <img class="use-icon" src="../assets/workbenches/wdZuxiang.svg" />
                  <span>我的集装箱</span>
                </router-link>
                <router-link to="/boxManageYard/yard">
                  <img class="use-icon" src="../assets/workbenches/duichang.svg" />
                  <span>我的堆场</span>
                </router-link>
              </div>
              <!-- <div v-else-if="tabsType==2"  class="tagList">
                <router-link to="/xdzxjk/boxHuiDiao/marketHuiDiaoBox">
                  <img class="use-icon" src="../assets/workbenches/qiugouxiang.svg" />
                  <span>出租箱广告</span>
                </router-link>
                <router-link to="/xdzxjk/orderManage/boxOwnerHuiDiaoOrder">
                  <img class="use-icon" src="../assets/workbenches/shouxiangDingdan.svg" />
                  <span>出租箱订单</span>
                </router-link>
                <router-link to="/financialManage/rentOrderSettleDetail">
                  <img class="use-icon" src="../assets/workbenches/caiWu.svg" />
                  <span>财务</span>
                </router-link>
                <router-link to="/boxManageMyBox/myBox">            
                  <img class="use-icon" src="../assets/workbenches/wdZuxiang.svg" />
                  <span>我的集装箱</span>
                </router-link>
                <router-link to="/boxManageYard/yard">
                  <img class="use-icon" src="../assets/workbenches/duichang.svg" />
                  <span>我的堆场</span>
                </router-link>
              </div> -->
              </div>
               <div v-else-if="from.tagName=='putBox-buyBox'">
                <!-- 集装箱公司贸易购买出售 -->
                <div v-if="tabsType==1" class="tagList">
                <router-link to="/xdzxgm/agentBuyBox/agentBuyBox">
                    <img class="use-icon" src="../assets/workbenches/gouXiang.svg" />
                    <span>购箱市场</span>
                  </router-link>
                  <router-link to="/xdzxgm/agentBuyOrder">
                    <img class="use-icon" src="../assets/workbenches/gouxiangDingdan.svg" />
                    <span>购箱订单</span>
                  </router-link>
                  <router-link to="/financialManage/bills">
                    <img class="use-icon" src="../assets/workbenches/caiWu.svg" />
                    <span>财务账单</span>
                  </router-link>
                  <router-link to="/xdzxgm/tiXiangManageBuyBox/GMtiXiangManageBuyBox">
                    <img class="use-icon" src="../assets/workbenches/gouxiangTixiangdan.svg" />
                    <span>购箱提箱单</span>
                  </router-link>
                  <router-link to="/xdzxgm/tiXiangManageBuyBox/GMtiXiangManageBuyBoxInfo">
                    <img class="use-icon" src="../assets/workbenches/gouxiangTixiangjilu.svg" />
                    <span>购箱提箱记录</span>
                  </router-link>
                </div>
              <div v-else-if="tabsType==2"  class="tagList">
                <!-- 出售 -->
                <router-link to="/xdzxcs/boxSell/seekSellBox">
                  <img class="use-icon" src="../assets/workbenches/qiuzuGg.svg" />
                  <span> 求购箱广告</span>
                </router-link>
                <router-link to="/xdzxcs/orderManageSellBox/sellOrder">
                  <img class="use-icon" src="../assets/workbenches/shouxiangDingdan.svg" />
                  <span>售箱订单</span>
                </router-link>
                <router-link to="/financialManageBoxSell/boxSellOrderSettleDetail">
                  <img class="use-icon" src="../assets/workbenches/caiWu.svg" />
                  <span>财务</span>
                </router-link>
                <router-link to="/xdzxcs/tiXiangManageSellBox/tiXiangManageSellBox">
                  <img class="use-icon" src="../assets/workbenches/shouxiangTixiangdan.svg" />
                  <span>售箱提箱单</span>
                </router-link>
                <router-link to="/xdzxcs/tiXiangManageSellBox/CStiXiangManageSellBoxInfo">
                  <img class="use-icon" src="../assets/workbenches/gouxiangTixiangjilu.svg" />
                  <span>售箱提箱记录</span>
                </router-link> 
              </div>
              </div>
            </el-col>
         
          </el-row>
        </el-col>

        <!-- 代办 -->
        <el-col class="leftCol2" :span="24">
          <el-row>
            <!-- <Memo style="width: 20px; height: 20px; margin-right: 8px;float: left;" /><span>我的待办</span> -->
            <span style="display: inline-block;width:5px;height:24px;background-color:#2158F3"></span>
            <span style="padding-left:5px;display: inline-block;height:24px;line-height:24px;font-weight:600">我的待办</span>
          </el-row>
          <!-- 货代 -->
            <div v-if="from.companyRole=='zx'">
            <!-- 租箱 -->
            <div v-if="from.tagName=='zx-rent'">
              <div v-if="tabsType==1">
              <el-row :gutter="10" style="padding-top: 20px;" class="col2row">
                <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                  <p style="position: absolute;top: 0px;left: 30px;">
                    <el-icon style="font-size: 40px;">
                      <img class="use-icon" src="../assets/workbenches/daiban-ZX.svg" />
                    </el-icon>
                    <span style="position: absolute;left: 45px;top:13px; width: 50px;">租箱</span>
                  </p>
                  <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                    <p><span>待提箱量</span><strong>{{getHDTodo.unPackedQty}}</strong><span>个</span></p>
                    <p><span>正常待还箱量</span><strong>{{ getHDTodo.normalUnReturnQty }}</strong><span>个</span></p>
                    <p><span>超期箱量</span><strong>{{ getHDTodo.overdueUnReturnQty }}</strong><span>个</span> </p>      
                  </div>
                </el-col>
                <el-col :span="1" style="background-color:#ffffff"></el-col>
                <el-col :span="10" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                <p style="position: absolute;top: 0px;left: 30px;">
                  <el-icon style="font-size: 40px;">
                    <img class="use-icon" src="../assets/workbenches/daiban-ZJ.svg" />
                  </el-icon>
                  <span style="position: absolute;left: 45px;top:13px; width: 50px;">租金</span>
                  </p>
                  <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                    <p><span>待申请发票租金</span>￥<strong>{{ getHDTodo.pendingInvoiceApplicationRentCny }}</strong>$<strong>{{ getHDTodo.pendingInvoiceApplicationRentUsd }}</strong></p>
                    <p><span>已提未付租金</span>￥<strong>{{ getHDTodo.submittedButUnpaidRentCny }}</strong>$<strong>{{ getHDTodo.submittedButUnpaidRentUsd }}</strong></p>
                    <p><span>已还未付超期费</span>$<strong>{{ getHDTodo.alreadyUnpaidOverdueFeeRentUsd }}</strong></p>
                  </div>
                </el-col>
                  <el-col :span="1" style="background-color:#ffffff"></el-col>
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                  <p style="position: absolute;top: 0px;left: 30px;">
                    <el-icon style="font-size: 40px;">
                      <img class="use-icon" src="../assets/workbenches/xd-GS.svg" />
                    </el-icon>
                    <span style="position: absolute;left: 45px;top:13px; width: 100px;">集装箱公司</span>
                  </p>
                  <div class="col8" style="position: absolute;top: 50px; font-size: 14px;">
                  <p><span>未付租金集装箱公司</span><strong>{{ getHDTodo.unpaidRentBoxCount }}</strong><span>家</span></p>
                  <p><span>超期未还集装箱公司</span><strong>{{ getHDTodo.overdueUnReturnBoxEastQty }}</strong> <span>家</span></p>
                  </div>
                  </el-col>
              </el-row>
              </div>
              <div v-if="tabsType==2">
                  <el-row :gutter="10" style="padding-top: 20px;" class="col2row">
                <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                  <p style="position: absolute;top: 0px;left: 30px;">
                    <el-icon style="font-size: 40px;">
                      <img class="use-icon" src="../assets/workbenches/daiban-ZX.svg" />
                    </el-icon>
                    <span style="position: absolute;left: 45px;top:13px; width: 50px;">租箱</span>
                  </p>
                  <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                    <p><span>已开提箱单待提箱量</span><strong>{{ hdBackTodo.unPackedQty || '0' }}</strong><sapn>个</sapn></p>
                    <p><span>正常待还箱量</span><strong>{{ hdBackTodo.normalUnReturnQty }}</strong><sapn>个</sapn></p>
                    <p><span>超期待还箱量</span><strong>{{ hdBackTodo.overdueUnReturnQty }}</strong><sapn>个</sapn></p>  
                  </div>
                </el-col>          
              <el-col :span="1" style="background-color:#ffffff"></el-col>
              <el-col :span="10" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                <p style="position: absolute;top: 0px;left: 30px;">
                  <el-icon style="font-size: 40px;">
                    <img class="use-icon" src="../assets/workbenches/daiban-XT.svg" />
                  </el-icon>
                  <span style="position: absolute;left: 45px;top:13px; width: 50px;"> 箱贴</span>
                  </p>
                  <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                    <p><span>未开发票箱贴</span>$<strong>{{ hdBackTodo.unopenedInvoiceApplicationCallbackUsd }}</strong></p>
                    <p><span>未收箱贴</span>$<strong>{{ hdBackTodo.notReceivedCallbackUsd }}</strong></p>
                    <p><span>未付超期费</span>$<strong>{{ hdBackTodo.unpaidOverdueFeeCallbackUsd }}</strong></p>
                  </div>
                </el-col>
                  <el-col :span="1" style="background-color:#ffffff"></el-col>
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                  <p style="position: absolute;top: 0px;left: 30px;">
                    <el-icon style="font-size: 40px;">
                      <img class="use-icon" src="../assets/workbenches/xd-GS.svg" />
                    </el-icon>
                    <span style="position: absolute;left: 45px;top:13px; width: 100px;">集装箱公司</span>
                  </p>
                  <div class="col8" style="position: absolute;top: 50px; font-size: 14px;">
                  <p><span>未收箱贴集装箱公司</span><strong>{{ hdBackTodo.unpaidCallbackBoxCount }}</strong><sapn>家</sapn></p>
                  <p><span>超期未还集装箱公司</span> <strong>{{ hdBackTodo.overdueUnReturnBoxEastQty }}</strong><sapn>家</sapn></p>
                  </div>
                </el-col>
              </el-row>
              </div> 
            </div>

              <div v-else-if="from.tagName=='zx-buyBox'">
                <div v-if="tabsType==1">
                  <el-row :gutter="10" style="padding-top: 20px;" class="col2row">
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                    <p style="position: absolute;top: 0px;left: 30px;">
                      <el-icon style="font-size: 40px;">
                        <img class="use-icon" src="../assets/workbenches/daiban-GX.svg" />
                      </el-icon>
                      <span style="position: absolute;left: 45px;top:13px; width: 50px;">购箱 </span>
                    </p>
                    <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                      <p><span>待付购箱费箱量</span><strong>{{ saleOrderQtyTodo.invoicedUnPayQty }}</strong><sapn>个</sapn> </p>
                      <p><span>待提箱量</span><strong>{{ saleOrderQtyTodo.unPackedQty }}</strong><sapn>个</sapn> </p>                   
                    </div>
                  </el-col>
                <el-col :span="1" style="background-color:#ffffff"></el-col>
                <el-col :span="10" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                  <p style="position: absolute;top: 0px;left: 30px;">
                    <el-icon style="font-size: 40px;">
                      <img class="use-icon" src="../assets/workbenches/daiban-GXF.svg" />
                    </el-icon>
                    <span style="position: absolute;left: 45px;top:13px; width: 50px;">购箱费</span>
                    </p>
                    <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                      <p><span>未申请发票购箱费</span>￥<strong>{{ saleOrderQtyTodo.pendingInvoiceBoxPurchaseFeeCny }}</strong>
                        $<strong>{{ saleOrderQtyTodo.pendingInvoiceBoxPurchaseFeeUsd }}</strong>
                      </p>
                      <p>
                        <span>未付购箱费</span>￥<strong>{{ saleOrderQtyTodo.unpaidBoxPurchaseFeeCny }}</strong>
                        $<strong>{{ saleOrderQtyTodo.unpaidBoxPurchaseFeeUsd }}</strong>
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="1" style="background-color:#ffffff"></el-col>
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                    <p style="position: absolute;top: 0px;left: 30px;">
                      <el-icon style="font-size: 40px;">
                        <img class="use-icon" src="../assets/workbenches/xd-GS.svg" />
                      </el-icon>
                      <span style="position: absolute;left: 45px;top:13px; width: 100px;"> 集装箱公司</span>
                    </p>
                  <div class="col8" style="position: absolute;top: 50px; font-size: 14px;">
                    <p><span>未申请发票卖家</span><strong>{{ saleOrderQtyTodo.pendingInvoiceBoxCount }}</strong><sapn>家</sapn> </p>
                    <p><span>未付购箱费卖家</span><strong>{{ saleOrderQtyTodo.unpaidBoxPurchaseFeeBoxCount }}</strong><sapn>家</sapn></p>                 
                  </div>
                </el-col>
                </el-row>
                </div>
                <div v-if="tabsType==2">
                  <el-row :gutter="10" style="padding-top: 20px;" class="col2row">
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                    <p style="position: absolute;top: 0px;left: 30px;">
                      <el-icon style="font-size: 40px;">
                        <img class="use-icon" src="../assets/workbenches/daiban-SX.svg" />
                      </el-icon>
                      <span style="position: absolute;left: 45px;top:13px; width: 50px;">售箱</span>
                    </p>
                    <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                      <p><span>待收售箱款箱量</span><strong>{{ sellBoxTodo.invoicedUnPayQty }}</strong><sapn>个</sapn> </p>
                      <p><span>待提箱量</span><strong>{{ sellBoxTodo.unPackedQty || '0'}}</strong><sapn>个</sapn></p>                 
                    </div>
                  </el-col>
                <el-col :span="1" style="background-color:#ffffff"></el-col>
                <el-col :span="10" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                  <p style="position: absolute;top: 0px;left: 30px;">
                    <el-icon style="font-size: 40px;">
                      <img class="use-icon" src="../assets/workbenches/daiban-SXK.svg" />
                    </el-icon>
                    <span style="position: absolute;left: 45px;top:13px; width: 50px;">售箱款</span>
                    </p>
                    <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                      <p><span>未开发票售箱款</span>
                        ￥<strong>{{ sellBoxTodo.unopenedInvoiceSellingBoxesFeeCny }}</strong>
                        $<strong>{{ sellBoxTodo.unopenedInvoiceSellingBoxesFeeUsd }}</strong>
                      </p>
                      <p><span>未收售箱款</span>
                        ￥<strong>{{ sellBoxTodo.notReceivedSellingBoxesFeeCny }}</strong>
                        $<strong>{{ sellBoxTodo.notReceivedSellingBoxesFeeUsd }}</strong>
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="1" style="background-color:#ffffff"></el-col>
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                    <p style="position: absolute;top: 0px;left: 30px;">
                      <el-icon style="font-size: 40px;">
                        <img class="use-icon" src="../assets/workbenches/gx-kh.svg" />
                      </el-icon>
                      <span style="position: absolute;left: 45px;top:13px; width: 100px;"> 客户</span>
                    </p>
                  <div class="col8" style="position: absolute;top: 50px; font-size: 14px;">
                    <p><span>未开发票客户</span><strong>{{ sellBoxTodo.unopenedInvoiceAgentCount }}</strong><sapn>家</sapn></p>
                    <p><span>未收售箱款客户</span><strong>{{ sellBoxTodo.notReceivedBoxPurchaseFeeAgentCount}}</strong><sapn>家</sapn></p>                
                  </div>
                </el-col>
                </el-row>
                </div> 
              </div>

            </div>
            <!-- 集装箱公司 -->
             <div v-else-if="from.companyRole=='putBox'">
              <div v-if="from.tagName=='putBox-rent'">
                <div v-if="tabsType==1">
                <el-row :gutter="10" style="padding-top: 20px;" class="col2row">
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                    <p style="position: absolute;top: 0px;left: 30px;">
                      <el-icon style="font-size: 40px;">
                        <img class="use-icon" src="../assets/workbenches/czx-xd.svg" />
                      </el-icon>
                      <span style="position: absolute;left: 45px;top:13px; width: 50px;">出租箱</span>
                    </p>
                    <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                      <p><span>待提箱量</span><strong>{{getHDTodo.unPackedQty}}</strong><span>个</span></p>
                      <p><span>正常待还箱量</span><strong>{{ getHDTodo.normalUnReturnQty }}</strong><span>个</span></p>
                      <p><span>超期待还箱量</span><strong>{{ getHDTodo.overdueUnReturnQty }}</strong><span>个</span> </p>      
                    </div>
                  </el-col>
                  <el-col :span="1" style="background-color:#ffffff"></el-col>
                  <el-col :span="10" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                  <p style="position: absolute;top: 0px;left: 30px;">
                    <el-icon style="font-size: 40px;">
                      <img class="use-icon" src="../assets/workbenches/czj-xd.svg" />
                    </el-icon>
                    <span style="position: absolute;left: 45px;top:13px; width: 50px;">出租金</span>
                    </p>
                    <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                      <p><span>待开发票出租金</span>￥<strong>{{ getHDTodo.pendingInvoiceApplicationRentCny }}</strong>$<strong>{{ getHDTodo.pendingInvoiceApplicationRentUsd }}</strong></p>
                      <p><span>未收出租金</span>￥<strong>{{ getHDTodo.submittedButUnpaidRentCny }}</strong>$<strong>{{ getHDTodo.submittedButUnpaidRentUsd }}</strong></p>
                      <p><span>未收超期费</span>$<strong>{{ getHDTodo.alreadyUnpaidOverdueFeeRentUsd }}</strong></p>
                    </div>
                  </el-col>
                  <el-col :span="1" style="background-color:#ffffff"></el-col>
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                    <p style="position: absolute;top: 0px;left: 30px;">
                      <el-icon style="font-size: 40px;">
                        <img class="use-icon" src="../assets/workbenches/gx-kh.svg" />
                      </el-icon>
                      <span style="position: absolute;left: 45px;top:13px; width: 100px;">客户</span>
                    </p>
                  <div class="col8" style="position: absolute;top: 50px; font-size: 14px;">
                    <p><span>未收出租金客户</span><strong>{{ getHDTodo.unpaidRentBoxCount }}</strong><span>家</span></p>
                    <p><span>超期未还箱客户</span><strong>{{ getHDTodo.overdueUnReturnBoxEastQty }}</strong> <span>家</span></p>
                    </div>
                  </el-col>
                </el-row>
                </div>
                <div v-if="tabsType==2">
                  <el-row :gutter="10" style="padding-top: 20px;" class="col2row">
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                    <p style="position: absolute;top: 0px;left: 30px;">
                      <el-icon style="font-size: 40px;">
                        <img class="use-icon" src="../assets/workbenches/czx-xd.svg" />
                      </el-icon>
                      <span style="position: absolute;left: 45px;top:13px; width: 50px;">出租箱</span>
                    </p>
                    <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                      <p><span>待提箱量</span><strong>{{ hdBackTodo.unPackedQty || '0' }}</strong><sapn>个</sapn></p>
                      <p><span>正常待还箱量</span><strong>{{ hdBackTodo.normalUnReturnQty }}</strong><sapn>个</sapn></p>
                      <p><span>超期待还箱量</span><strong>{{ hdBackTodo.overdueUnReturnQty }}</strong><sapn>个</sapn></p>  
                    </div>
                  </el-col>          
                <el-col :span="1" style="background-color:#ffffff"></el-col>
                <el-col :span="10" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                  <p style="position: absolute;top: 0px;left: 30px;">
                    <el-icon style="font-size: 40px;">
                      <img class="use-icon" src="../assets/workbenches/czj-xd.svg" />
                    </el-icon>
                    <span style="position: absolute;left: 45px;top:13px; width: 50px;"> 箱贴</span>
                    </p>
                    <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                      <p><span>未申请发票箱贴</span>$<strong>{{ hdBackTodo.unopenedInvoiceApplicationCallbackUsd }}</strong></p>
                      <p><span>未收箱贴</span>$<strong>{{ hdBackTodo.notReceivedCallbackUsd }}</strong></p>
                      <p><span>未扣减超期费</span>$<strong>{{ hdBackTodo.unpaidOverdueFeeCallbackUsd }}</strong></p>
                    </div>
                  </el-col>
                  <el-col :span="1" style="background-color:#ffffff"></el-col>
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                    <p style="position: absolute;top: 0px;left: 30px;">
                      <el-icon style="font-size: 40px;">
                        <img class="use-icon" src="../assets/workbenches/gx-kh.svg" />
                      </el-icon>
                      <span style="position: absolute;left: 45px;top:13px; width: 100px;">客户</span>
                    </p>
                  <div class="col8" style="position: absolute;top: 50px; font-size: 14px;">
                    <p><span>未付箱贴客户</span><strong>{{ hdBackTodo.unpaidCallbackBoxCount }}</strong><sapn>家</sapn></p>
                    <p><span>超期未还客户</span> <strong>{{ hdBackTodo.overdueUnReturnBoxEastQty }}</strong><sapn>家</sapn></p>
                    </div>
                  </el-col>
                </el-row>
                </div> 
              </div>
              <div v-else-if="from.tagName=='putBox-buyBox'">
                <div v-if="tabsType==1">
                  <el-row :gutter="10" style="padding-top: 20px;" class="col2row">
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                    <p style="position: absolute;top: 0px;left: 30px;">
                      <el-icon style="font-size: 40px;">
                        <img class="use-icon" src="../assets/workbenches/daiban-GX.svg" />
                      </el-icon>
                      <span style="position: absolute;left: 45px;top:13px; width: 50px;">购箱 </span>
                    </p>
                    <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                      <p><span>待付购箱费箱量</span><strong>{{ saleOrderQtyTodo.invoicedUnPayQty }}</strong><sapn>个</sapn> </p>
                      <p><span>待提箱量</span><strong>{{ saleOrderQtyTodo.unPackedQty }}</strong><sapn>个</sapn> </p>                   
                    </div>
                  </el-col>
                <el-col :span="1" style="background-color:#ffffff"></el-col>
                <el-col :span="10" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                  <p style="position: absolute;top: 0px;left: 30px;">
                    <el-icon style="font-size: 40px;">
                      <img class="use-icon" src="../assets/workbenches/daiban-GXF.svg" />
                    </el-icon>
                    <span style="position: absolute;left: 45px;top:13px; width: 50px;">购箱费</span>
                    </p>
                    <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                      <p><span>未申请发票购箱费</span>￥<strong>{{ saleOrderQtyTodo.pendingInvoiceBoxPurchaseFeeCny }}</strong>
                        $<strong>{{ saleOrderQtyTodo.pendingInvoiceBoxPurchaseFeeUsd }}</strong>
                      </p>
                      <p>
                        <span>未付购箱费</span>￥<strong>{{ saleOrderQtyTodo.unpaidBoxPurchaseFeeCny }}</strong>
                        $<strong>{{ saleOrderQtyTodo.unpaidBoxPurchaseFeeUsd }}</strong>
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="1" style="background-color:#ffffff"></el-col>
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                    <p style="position: absolute;top: 0px;left: 30px;">
                      <el-icon style="font-size: 40px;">
                        <img class="use-icon" src="../assets/workbenches/xd-GS.svg" />
                      </el-icon>
                      <span style="position: absolute;left: 45px;top:13px; width: 100px;"> 集装箱公司</span>
                    </p>
                  <div class="col8" style="position: absolute;top: 50px; font-size: 14px;">
                    <p><span>未申请发票卖家</span><strong>{{ saleOrderQtyTodo.pendingInvoiceBoxCount }}</strong><sapn>家</sapn> </p>
                    <p><span>未付购箱费卖家</span><strong>{{ saleOrderQtyTodo.unpaidBoxPurchaseFeeBoxCount }}</strong><sapn>家</sapn></p>                 
                  </div>
                </el-col>
                </el-row>
                </div>
                <div v-if="tabsType==2">
                  <el-row :gutter="10" style="padding-top: 20px;" class="col2row">
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                    <p style="position: absolute;top: 0px;left: 30px;">
                      <el-icon style="font-size: 40px;">
                        <img class="use-icon" src="../assets/workbenches/daiban-SX.svg" />
                      </el-icon>
                      <span style="position: absolute;left: 45px;top:13px; width: 50px;">售箱</span>
                    </p>
                    <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                      <p><span>待收售箱款箱量</span><strong>{{ sellBoxTodo.invoicedUnPayQty }}</strong><sapn>个</sapn> </p>
                      <p><span>待提箱量</span><strong>{{ sellBoxTodo.unPackedQty || '0'}}</strong><sapn>个</sapn></p>                 
                    </div>
                  </el-col>
                <el-col :span="1" style="background-color:#ffffff"></el-col>
                <el-col :span="10" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                  <p style="position: absolute;top: 0px;left: 30px;">
                    <el-icon style="font-size: 40px;">
                      <img class="use-icon" src="../assets/workbenches/daiban-SXK.svg" />
                    </el-icon>
                    <span style="position: absolute;left: 45px;top:13px; width: 50px;">售箱款</span>
                    </p>
                    <div class="col8" style="position: absolute;top: 50px;font-size: 14px;">
                      <p><span>未开发票售箱款</span>
                        ￥<strong>{{ sellBoxTodo.unopenedInvoiceSellingBoxesFeeCny }}</strong>
                        $<strong>{{ sellBoxTodo.unopenedInvoiceSellingBoxesFeeUsd }}</strong>
                      </p>
                      <p><span>未收售箱款</span>
                        ￥<strong>{{ sellBoxTodo.notReceivedSellingBoxesFeeCny }}</strong>
                        $<strong>{{ sellBoxTodo.notReceivedSellingBoxesFeeUsd }}</strong>
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="1" style="background-color:#ffffff"></el-col>
                  <el-col :span="6" style="background: linear-gradient(180deg, #e8efff 0%, #e8efff00 100%);">
                    <p style="position: absolute;top: 0px;left: 30px;">
                      <el-icon style="font-size: 40px;">
                        <img class="use-icon" src="../assets/workbenches/daiban-MK.svg" />
                      </el-icon>
                      <span style="position: absolute;left: 45px;top:13px; width: 100px;"> 客户</span>
                    </p>
                  <div class="col8" style="position: absolute;top: 50px; font-size: 14px;">
                    <p><span>未开发票客户</span><strong>{{ sellBoxTodo.unopenedInvoiceAgentCount }}</strong><sapn>家</sapn></p>
                    <p><span>未收售箱款客户</span><strong>{{ sellBoxTodo.notReceivedBoxPurchaseFeeAgentCount}}</strong><sapn>家</sapn></p>                
                  </div>
                </el-col>
                </el-row>
                </div> 
              </div>
            </div>
              
        </el-col>
        <!-- 图表 -->
        <el-tabs v-model="activeTab"  @tab-click="handleClick" style="background-color: #ffffff;border-radius:10px;padding:20px;width: 100%;">
          <el-tab-pane label="待办订单统计量" name="1" :lazy = "true">
            <div>
              <BarChart v-bind="barData" :companyRole="from.companyRole" :tagName="from.tagName" :tabsType="tabsType"></BarChart> 
            </div>
          </el-tab-pane>
          <el-tab-pane label="已下单订单量统计" name="2" :lazy = "true"> 
            <div>
              <LineChart v-bind="lineData" :companyRole="from.companyRole" :tagName="from.tagName" :tabsType="tabsType"></LineChart>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-col>
    <el-col :span="8" class="rightCol">
      <div style="padding: 20px;">
        <div class="mag-top">
          <div class="mag-top-flex">
            <el-icon style="font-size: 30px;color: #186DF5;">
            <ChatDotRound />
            </el-icon>
            <span>平台公告</span>
          </div>
           <router-link style="color: #4E5969;" class="mag-top-flex" to="/webInfoManage/webAnnouncement">
                   <saan>查看更多</saan>
              <el-icon style="margin-left: 5px;"><ArrowRight /></el-icon>
          </router-link>
        </div>             
       <div class="msg-main">
          <div class="msg-main-list" v-for=" item in getPlatformNoticesList" :key="item.id">
            <div class="msg-main-list-fl">{{item.title}}</div>
            <div class="msg-main-list-fr">{{formatDate(item.publishDate)}}</div>
          </div>
        </div>
      </div>
       <div style="margin-top: 100px; padding: 20px;">
        <div class="mag-top">
          <div class="mag-top-flex">
            <el-icon style="font-size: 30px;color: #186DF5;"><BellFilled /></el-icon>
            <span>系统消息</span>
          </div>
          <router-link style="color: #4E5969;" class="mag-top-flex" to="/webInfoManage/systemAnnouncement">
                   <saan>查看更多</saan>
              <el-icon style="margin-left: 5px;"><ArrowRight /></el-icon>
          </router-link>
        </div>             
       <div class="msg-main">
          <div class="msg-main-list" v-for=" item in gtMessagesList" :key="item.id" @click="msgItem(item)" style="cursor: pointer;">
            <div class="msg-main-list-fl">{{item.msgTitle}}</div>
            <div class="msg-main-list-fr">{{formatDate(item.createTime)}}</div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
   </div>
    <msggesInfo ref="msggesInfoRef"></msggesInfo>
</template>
<script setup lang="ts">
import { onMounted, onActivated,nextTick, reactive, watch, ref, computed, h } from 'vue'
import { hdRentTodo, hdCallbackTodo, saleBoxTodo1, hdRentOrderQty, hdRentOrderDateAnalysis } from '@/api/workbenches/index'; //货代
import { rentTodo, callbackTodo } from '@/api/workbenches/index'; // 租箱（集装箱公司）
import { saleBoxTodo } from '@/api/workbenches/index'  // 卖箱（箱贸）
import { Memo, Search } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import { useRoute,useRouter } from 'vue-router'
import usePermissionStore from '@/store/modules/permission'
import { getPlatformNotices } from '@/api/platformNotices/index'
import { getMessages } from '@/api/sysMessag/index'
import { formatDate } from '@/utils'
import msggesInfo from '@/components/magges/indexInfo'
import type { TabsPaneContext } from 'element-plus'
import BarChart from '@/components/chart/barChart.vue'
import LineChart from '@/components/chart/lineChart.vue'
const route = useRoute();
const barData = reactive({
  dataType: 'zx',
  data: []
})
const lineData = reactive({
  dataType: 'zx',
  data: []
})
const tabsList=ref([
{ label: '出口', value: 1 },
{ label: '进口', value: 2},

])
const tabsType=ref(1)
const activeTab=ref('1') //1代办 2已下单
//tabs 切换
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const from = reactive({
  datePickerType: 'date',
  region: '3',
  startTime: '',
  endTime: '',
  companyRole:localStorage.getItem('companyRole'),
  tagName:localStorage.getItem('tagName'),
  comRole: 'zx',
  workbenchPosition: ''
})
// 获取路径参数和查询参数
const paramsAndQuery = computed(() => ({
  query: route.query
}));
// const workbenchPos = computed(() => ({
//   workPos: localStorage.getItem('tagName')
// }));
watch(
  paramsAndQuery,
  (newVal, oldVal) => {
    from.comRole = newVal.query.comRole
    barData.dataType = newVal.query.comRole
    lineData.dataType = newVal.query.comRole
    from.companyRole = localStorage.getItem('companyRole')
    from.tagName = localStorage.getItem('tagName')
    console.log('from.tagName',from.tagName)
  },
);
// watch(() => workbenchPos, (newVal, oldVal) => {
//   // console.log(newVal,oldVal)
// })
//监听 tagName
import orderInfo from '../store/modules/order'
watch(() => orderInfo().tagName, (val: any) => {
  console.log('val',val)
  if(val=='zx-rent' || val=='putBox-rent'){
    tabsList.value=([
      { label: '出口', value: 1 },
      { label: '进口', value: 2},
    ])
  }else if(val=='zx-buyBox' || val=='putBox-buyBox'){
    tabsList.value=([
      { label: '购买', value: 1 },
      { label: '出售', value: 2},
    ])
  }
    from.tagName = val
    tabsType.value=1
},{immediate:true})
const router = useRouter();
const cheyuanClick=()=>{
  let tagName='carServer'
  changeSidbar(tagName)
}
function changeSidbar(tagName) {
  localStorage.setItem('tagName', tagName)
  orderInfo().setTagName(tagName)
  const permissionStore = usePermissionStore()
  permissionStore.generateRoutesJc(localStorage.getItem('companyRole'), tagName)
    router.push({
    path: '/carServer/searchCar',
  })
}

onMounted(() => {
  getRentTodo() // 货代 租箱代办
  getHDCallbackTodo() // 货代   回调代办\
  hdsaleBoxTodo() // 货代 购箱代办
  getCallbackTodo() //集装箱公司 回调代办
  gteRentTodo() // 集装箱公司 租赁代办
  getSaleBoxTodo()//卖箱  出售箱
  getPlatform() //公告
  getMessagesform() //消息

})
//tabs切换 列表字段是否显示
const tabsClick=(val)=>{
 tabsType.value=val
}
// 货代
// 获取租箱我的待办数据 HomePageAgent.http
const getHDTodo = ref({})
const getRentTodo = () => {
  hdRentTodo().then(res => { //货代 -》 租箱 -》 代办
    getHDTodo.value=res.data
  })
}
// 获取货代回调代办
const hdBackTodo = ref({})
const getHDCallbackTodo = () => {
  hdCallbackTodo().then(res => {
    hdBackTodo.value=res.data
  })
}
// 获取货代购箱代办
const saleOrderQtyTodo = ref({})
const hdsaleBoxTodo = () => {
  saleBoxTodo1().then(res => {
    saleOrderQtyTodo.value=res.data
  })
}

// 租箱（集装箱公司）
// 租赁代办 HomePageBoxEast.http
const putBoxZlTodo = ref({})
const gteRentTodo = () => {
  rentTodo().then(res => {
    putBoxZlTodo.value=res.data
  })
}
const putBoxHdTodo = ref({})
// 集装箱公司回调代办
const getCallbackTodo = () => {
  callbackTodo().then(res => {
    putBoxHdTodo.value=res.data
  })
}
// 卖箱（箱贸）
// 代办统计 HomePageSale.http
const sellBoxTodo = ref({})

const getSaleBoxTodo = () => {
  saleBoxTodo().then(res => {
    sellBoxTodo.value=res.data
  })
}
const getPlatformNoticesList=ref([])
// 公告
function getPlatform() {
  // 列表
  let data={
     pageNum: 1,
    pageSize: 10,
  }
  getPlatformNotices(JSON.stringify(data)).then((res: any) => {
    getPlatformNoticesList.value = res.data.list;
  }).catch((err) => {
    console.log(err)
  })
}
const gtMessagesList=ref([])
// 消息
function getMessagesform() {
  // 列表
  let data={
     pageNum: 1,
    pageSize: 10,
  }
  getMessages(JSON.stringify(data)).then((res: any) => {
    gtMessagesList.value = res.data.list;
  }).catch((err) => {
    console.log(err)
  })
}
const msggesInfoRef=ref()
const msgItem=(item)=>{
  msggesInfoRef.value.openBox(item.id)

}
</script>
<style scoped lang="scss">
.el-row {
  padding: 0 1%;
}

.el-col {
  margin-bottom: 20px;
}

.leftCol1 {
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  text-align: center;

  div {
    padding: 20px;

    h4 {
      margin: 0;
    }
  }
}

.leftCol2 {
  padding: 20px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
}

.col2row {
  height: 250px;

  .el-col {
    position: relative;
    border-radius: 10px;
    background-color: rgb(220, 214, 214);
    box-shadow: 1px rgba(0, 0, 0, 0.5);

    .col8 {
      padding: 0 0 10px 20px;
    }
  }
}

.col2row .el-col:nth-child(2n) {
  background-color: rgb(231, 231, 231);
  ;
  box-shadow: none;
}

strong {
  padding: 0 5px;
  color: #2158F3;
  font-size: 20px;
}

.leftCol3 div.title,
.leftCol4 div.title {
  // width: 200px;
  // margin: auto;
  // height: 100px;
  // text-align: center;
  // background-color: rgb(157, 170, 181);
  // border-radius: 15px;
  // box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  // padding: 20px 0;
  position: relative;
}

.leftCol3 div span,
.leftCol4 div span {
  display: block;
}

.leftCol3 div span:first-child,
.leftCol4 div span:first-child {
  font-weight: 600;
}

.control1 {
  margin-bottom: 20px;
  height: 60px;
}

.ctroDay2 {
  width: 60%;
  float: left;
}

.ctroDay1 {
  width: 40%;
  height: 50px;
  float: left;
}

.sel1 {
  margin: 0;
  padding: 0;
}

.ctroDay1 span {
  display: inline-block;
  float: left;
  width: 30%;
  height: 35px;
  line-height: 35px;
  background-color: alice#2158F3;
  text-align: center;
  cursor: pointer;
}

.ctroDay1 span:first-child {
  margin-left: 20%;
  display: inline-block;
  float: left;
  width: 30%;
  background-color: alice#2158F3;
}

.ctroDay2 {}

.check {
  background-color: rgb(146, 164, 158) !important;
}

.rightCol {
  height: 1500px;
  background-color: rgb(255, 255, 255);
  padding: 30px 0 0 0;
  border-radius: 10px;

  ul {
    list-style-type: none;
  }

  .rightCol1 {
    position: relative;
  }

  .rightCol2 {
    position: relative;
  }

}

.col8 {}

#main1,
#main2 {
  margin-left: 10%;
  width: 80%;
  height: 500px;
}

.use-icon {
  width: 100%;
}
.demo-tabs{
  display: block;
  width: 100%;
}
.tagList{
  display: flex;
  justify-content: space-between;
}
.tagList a{
 width: 10%;
}
.tabs-top{

  padding: 10px 10px 10px 30px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.demo-tabs{
    background: #ffff;
  border-radius: 10px;
  padding:0 20px;
  box-sizing: border-box;

}
.msg-main{
  margin-top: 20px;
}
.msg-main-list{
  display: flex;
  justify-content: space-between;
   align-items: center;
  padding: 5px 0;
}
.msg-main-list-fl{
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-main-list-fr{
  width: 35%;
  text-align: right;
  color: #4E5969;
}
.mag-top{
  display: flex;
  justify-content: space-between;
   align-items: center;
}
.mag-top-flex{
  display: flex;
 align-items: center;
}
.mag-top-flex span{
 margin-left: 10px;
}
</style>
